<template>
  <div id="app">
    <!-- TopBar -->
    <TopBar :key="num" />
    <!-- Header -->
    <Header />
    <router-view @Fn="chanheNum" />
    <!-- Footer -->
    <Footer />
    <!-- 遮罩和白色盒子 -->
    <Login v-show="isShowLoginModal" />

    <!-- Toast组件 -->
    <transition name="fade">
      <Toast v-show="isShowToast" />
    </transition>
  </div>
</template>
<script>
import { JingpinAPI } from "@/request/api.js";
import TopBar from "./components/TopBar.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import Login from "./components/Login.vue";
import Toast from "./components/Toast.vue";
import { mapState } from "vuex";
export default {
  name: "HomeView",
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    chanheNum() {
      this.num++;
    },
  },
  watch: {
    "$route.path": {
      handler() {
        if (!localStorage.getItem("x-auth-token")) {
          this.num++;
        }
      },
    },
  },
  components: {
    TopBar,
    Header,
    Footer,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.handleLoginModal.isShowLoginModal,
      isShowToast: (state) => state.handleToast.isShowToast,
    }),
  },
  async created() {
    //axios.get().then()这样的书写， 会有缺陷
    //1、请求头能不能统一管理
    //2、不便于接口的统一管理
    //3、容易出现回调地狱

    //发起请求，请求数据
    //JingpinAPI()最终返回？ promise对象
    // async + await
    // async 后面一般放promise对象
    //let res 的值相当于 之前的写法 .then(res)  这里面的值
    let res = await JingpinAPI();

    // console.log(res);
  },
};
</script>

<style lang="less">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   color: #2c3e50;
// }
//定义入场开始状态
.fade.enter,
.fade-leave-to {
  opacity: 0;
}
.fade.enter-active,
.fade-leave-active {
  transition: opacity 0.5s; //停留的时间
}
.fade.enter-to,
.fade-leave {
  opacity: 1;
}
</style>
